<template>
    <div class="ywgl_wrap">
        <div class="page-content">
            <div class="header-box">
                <el-date-picker
                        v-model="value1"
                        type="datetimerange"
                        range-separator="~"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-input
                        placeholder="运维人员姓名"
                        size="small"
                        v-model="value">
                    <i slot="suffix" class="el-input__icon el-icon-edit-outline"></i>
                </el-input>
                <el-select class="hy_select"  v-model="value" placeholder="运维类型">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                    </el-option>
                </el-select>
                <el-select class="hy_select"  v-model="value" placeholder="是否解决">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            :disabled="item.disabled">
                    </el-option>
                </el-select>

                <div class="btn-group">
                    <el-button class="hy_btn is_primary" type="primary" @click="btnClick()"><img src="../../assets/images/sbgl/icon_add.png" alt="">新增</el-button>
                    <el-button class="hy_btn"><img src="../../assets/images/sbgl/icon_search.png" alt="">查询</el-button>
                    <el-button class="hy_btn"><img src="../../assets/images/sbgl/icon_reset.png" alt="">重置</el-button>
                    <el-button class="hy_btn"><img src="../../assets/images/sbgl/icon_export.png" alt="">导出</el-button>
                </div>
            </div>

            <div class="table-box">
                <el-table
                        :data="tableData"
                        class="hy_table"
                >
                    <el-table-column
                            type="selection"
                            align="center"
                            width="60px">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="设备名称">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            width="110px"
                            label="设备类型">
                    </el-table-column>
                    <el-table-column
                            prop="dateTime"
                            label="操作时间">
                    </el-table-column>
                    <el-table-column
                            prop="endTime"
                            label="结束时间">
                    </el-table-column>
                    <el-table-column
                            prop="code"
                            label="告警故障编码">
                    </el-table-column>
                    <el-table-column
                            prop="eomsType"
                            width="110px"
                            label="运维类型">
                    </el-table-column>
                    <el-table-column
                            prop="eomsLog"
                            label="运维日志">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            width="100px"
                            label="姓名">
                    </el-table-column>
                    <el-table-column
                            prop="resolved"
                            width="100px"
                            label="是否解决">
                    </el-table-column>
                    <el-table-column
                            prop=""
                            width="80px"
                            label="操作">
                        <template slot-scope="scope">
                            <el-link type="primary">查看</el-link>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <el-pagination
                    class="hy-pagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    background
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next"
                    :total="50">
            </el-pagination>

            <ControlDialog ref="controlDialog"
                           :dialogTitle="dialogTitle"
                           :fromList="fromList"
            ></ControlDialog>
        </div>
    </div>
</template>

<script>
    import ControlDialog from '../ControlDialog';

    export default {
        components: {
            ControlDialog,
        },
        data() {
            return {
                value: '',
                value1: [new Date(), new Date()],
                options: [],
                tableData: [
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },
                    {
                        name: '某某某设备',
                        type: '1.293',
                        dateTime: '2021-08-20 14:23:49',
                        endTime: '2021-08-20 14:23:49',
                        code: '382939DJAKDWKDF',
                        eomsType: '类型名称',
                        eomsLog: '20210821039',
                        userName: '张国荣',
                        resolved: '是',
                    },

                ],
                currentPage: 1,
                dialogTitle: '新增运维',
                fromList: [
                    {
                        name: '设备名称',
                        type: 'input',
                        label: 'name1',
                        isRules: true,
                    },
                    {
                        name: '设备类型',
                        type: 'input',
                        label: 'name2',
                        isRules: true,
                    },
                    {
                        name: '操作时间',
                        type: 'datetime',
                        label: 'name3',
                        isRules: true,
                    },
                    {
                        name: '结束时间',
                        type: 'datetime',
                        label: 'name4',
                        isRules: true,
                    },
                    {
                        name: '告警故障编码',
                        type: 'input',
                        label: 'name5',
                        isRules: true,
                    },
                    {
                        name: '运维类型',
                        type: 'input',
                        label: 'name6',
                    },
                    {
                        name: '运维日志',
                        type: 'input',
                        label: 'name6',
                    },
                    {
                        name: '姓名',
                        type: 'input',
                        label: 'name6',
                    },
                    {
                        name: '是否解决',
                        type: 'select',
                        label: 'name7',
                        isRules: true,
                        option: [
                            {value: '1', label: '是'},
                            {value: '0', label: '否'},
                        ],
                    },
                ],
            }
        },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },

            btnClick() {
                this.$refs.controlDialog.handleDisabled = false;
                this.$refs.controlDialog.dialogVisible = true;
            },
        },
        mounted() {

        }
    }
</script>

<style lang="less">
    .ywgl_wrap {
        width: 100%;
        height: 100%;
        position: relative;

        >.page-content {
            width: 100%;
            min-height: 340px;
            padding: 37px 40px;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 8px;

            >.header-box {
                width: 100%;
                height: 32px;
                margin-bottom: 32px;
                line-height: 32px;
                position: relative;

                >.el-date-editor {
                    vertical-align: top;
                    width: 350px;
                    height: 32px;
                    background-color: #ffffff;
                    margin-right: 28px;

                    .el-input__icon {
                        line-height: 27px;
                    }

                    .el-range-input {
                        font-size: 13px;
                        background-color: transparent;
                        line-height: 27px;
                    }

                    .el-range-separator {
                        line-height: 27px;
                    }
                }

                >.el-input {
                    width: 160px;
                    position: relative;
                    top: -1px;
                    margin-right: 28px;

                    >.el-input__inner {
                        height: 32px;
                        line-height: 32px;
                        background: #FFFFFF;
                        border-radius: 4px;
                        border: 1px solid #CFD1D8;
                        color: #535763;
                    }
                }

                >.el-select {
                    vertical-align: top;
                    margin-right: 28px;
                    position: relative;
                    top: -0.5px;

                    .el-input__icon {
                        line-height: 32px;
                    }
                }

                >.btn-group {
                    position: absolute;
                    right: 0px;
                    top: -4px;

                    .el-button {

                        img {
                            position: relative;
                            top: -0.4px;
                        }
                    }

                    .el-button.hy_btn + .el-button.hy_btn {
                        margin-left: 16px;
                    }
                }
            }

            >.table-box {
                width: 100%;
            }
        }
    }
</style>
